<template>
    <!-- template 中只能有一个根元素（最外层只能有一个 div 盒子） -->
    <div id="login">
        <div class="content">
            <el-row class="item">
                <div class="img">
                    <img src="../assets/logo.png" height="100px" alt="">
                </div>
                <!-- 表单 -->
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                    <el-form-item label="账 号" prop="username">
                        <el-col :span="24">
                            <el-input v-model="ruleForm.usersAccount"></el-input>
                        </el-col>  
                    </el-form-item>
                    <el-form-item label="密 码" prop="password">
                        <el-col :span="24">
                            <el-input v-model="ruleForm.usersPwd"></el-input>
                        </el-col> 
                    </el-form-item>
                </el-form>
                <el-row class="btn">
                    <el-button type="primary" @click="login()"> 登录</el-button>
                </el-row>
                <!-- <el-row class="btn">
                    <el-button  @click="test()"> 测试</el-button>
                </el-row> -->
                <!-- <el-row class="btn">
                    <el-button type="primary" @click="reset()"> 重置</el-button>
                </el-row> -->           
            </el-row>
            
        </div>

    </div>
</template>
<style lang="less">
    #login {
        width: 100%;
        height: 100%;
        background: url(../assets/bgi.png) no-repeat;
        background-size: auto;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        .content {
            .el-form-item__label:before {
                        content: '';
                    }
            // background-color: green;
            box-shadow: 1px 2px 8px 1px #b1aeae;
            width: 50%;
            height: 50%;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .item {
                .img {
                    text-align: center;
                    margin-top: 20px;
                    margin-bottom: 20px;
                }
                width: 400px;
                height: 100%;
                label{
                    font-size: 25px !important;
                    color: black;
                }
                .btn {
                    text-align: center;
                }
            }
            
        }
        
    }
</style>
<script>
// 导入 axios请求库
import axios from "axios";
// 默认导出，只是固定写法
    export default {
        // 组件中的 data 必须是一个函数
        // data: function(){}   ': function' 可以省略
        data() {
            //这个 return 出去的（）中，可以定义数据
            return {
                ruleForm: {
                    usersAccount:'',
                    usersPwd:''     
                },
                rules: {
                    usersAccount: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                    ],

                    usersPwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ]
                }
            }
        },
        // created() {
        //     // 调用请求数据的方法
        //     this.loginData()
        // },
        methods: {
            // test() {
            //     const url = "http://192.168.31.179:8080/users/usersLogin"
            //     axios({
            //         url: url,
            //         method: "post",
            //         data:this.ruleForm
            //     }).then(function (response) {
            //         console.log(response.data)
            //     }, function() {
            //         alert("连接失败")
            //     });
            // },
            // 封装请求数据的方法
            // async loginData() {
            //     const {data : res} = await axios.post('http://192.168.31.124:8080/user/userLogin')
            //     console.log(res)
            // },
            // 在组件中，this就表示当前组件的实例
            login() {
                // 调后台接口
                const url = "http://192.168.31.179:8080/users/usersLogin"
                const that = this
                axios({
                    url: url,
                    method: "post",
                    data:that.ruleForm
                }).then(function (response) {
                    console.log(response.data)
                    // 判断用户名密码是否为空
                    // if(that.ruleForm.usersAccount === '' || that.ruleForm.usersPwd === '') {
                    //     alert("用户名或密码不能为空")
                    // }
                    if(response.data.code == '200') {
                        // 登陆成功
                            // 1.存储 token
                            localStorage.setItem('token','Bearer admin')
                            // 2.跳转到后台主页
                            that.$router.push('/UserManagement')
                    } else if(response.data.code == '500') {
                        // 登陆失败
                        alert("用户名或密码错误")
                        localStorage.removeItem('token')
                    }
                }, function() {
                    alert("连接失败")
                });
                
            },
        },
        
    }
</script>